<template>
  <div class="notfound" ref="bgstar">
    151561561
    <h2>dsakhdlisajdlsald</h2>
    <img src="../assets/images/404_for.png" class="img404" alt />
    <span
          v-for="(item,i) in spanNum"
          :style="{top:item.y,left:item.x,transform:'scale('+item.scaler+')',animationDelay:item.rate,backgroundColor:item.rgb}"
          :key="i"
          class="span-dots"
          ></span>
  </div>
</template>


<script>
//混入
import {mymixins} from "@/utils"
export default {
  mixins:[mymixins],
  data() {
    return {
      spanNum: [],
    };
  },
  // methods:{
  //   ranFun(min, max){
  //       return Math.floor(Math.random() * (max - min + 1) + min);
  //   }
  // },
  mounted() {
    var screenW = this.$refs.bgstar.offsetWidth;
    var screenH = this.$refs.bgstar.offsetHeight;
    for (var i = 0; i < 550; i++) {
      //位置随机
      var x = Math.floor(Math.random() * screenW);
      var y = Math.floor(Math.random() * screenH);
      //大小随机
      var scaler = Math.random() * 1.5;
      //频率随机
      var rate = Math.random() * 5.5;
      var r = this.ranFun(10, 250);
      var g = this.ranFun(10, 250);
      var b = this.ranFun(10, 250);
      this.spanNum.push({
        x: x + "px",
        y: y + "px",
        scaler: scaler,
        rate: rate + "s",
        rgb: `rgb(${r},${g},${b})`,
      });
    }
  },
};
</script>





<style lang="scss" >
.notfound {
  width: 100%;
  height: 100%;
  background: #0b0f15;
  overflow: hidden;
  position: relative;
}

.span-dots {
  position: absolute;
  animation: flash 2s alternate infinite;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  // background: #fff;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

.img404 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>